<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>讨论区 - 智慧教学平台</title>
		<link rel="stylesheet" href="../static/font-awesome//4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
		<link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
		<link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
		<link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">


		<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="../css/muke.css">
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/index.js"></script>

		<script type="text/javascript">

		</script>
	</head>
	<body>
		<div class="tab-content" id="course">
			<br />
			<el-button type="primary" @click="dialogFormVisible = true">发起主题</el-button>

			<el-dialog title="发起主题" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="主题板块" :label-width="formLabelWidth">
						<el-select v-model="form.type" placeholder="请选择主题板块">
							<el-option v-for="type in typeList" :label="type.typeName" :value="type.typeId" :key="type.typeId"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="主题" :label-width="formLabelWidth">
						<el-input v-model="form.title" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="内容" :label-width="formLabelWidth">
						<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="publicPost()">发 表</el-button>
				</div>
			</el-dialog>

			<br />
			<hr />
			<h4>子版块</h4>
			<br />
			<hr />
			<div>
				<ul class="row question-items" v-for="type in typeList">
					<li class="question-item">
						<div class="col-md-10">
							<div class="col-sm-12">
								<h4>
									<a class="question-item-title" target="_blank" v-on:click="queryPostByTypename(type.typeName)">{{type.typeName}}</a>
								</h4>
								<div class="question-item-summary">
									<div class="user-username ">
										<a class="avatar">{{type.typeDescribe}}</a>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<br />
			<br />

			<h4><a @click="queryAll">全部主题</a></h4>
			<br />
			<el-button-group>
				<el-button type="success" size="mini" @click="btnNew" plain>最新发表</el-button>
				<el-button type="success" size="mini" @click="btnHot" plain>最高热度</el-button>
				<el-button type="success" size="mini" @click="btnReply" plain>最多回复</el-button>
			</el-button-group>
			<hr />
			<div>
				<ul v-for="post in postList" class="row question-items" :data="postList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
					<li class="question-item">
						<div class="col-md-8">
							<div class="col-sm-12">
								<h4>
									<a class="question-item-title" target="_blank" v-on:click="jumpPostDetails(post)">{{post.postTitle}}</a>
								</h4>
								<div class="question-item-summary">
									<div class="user-username ">
										<!-- 用户名称 -->
										<a class="avatar" href="#" target="_blank">{{post.userName}}</a>
									</div>
									于<span class="question-item-date">{{post.replyTime}}</span>发表
								</div>
							</div>
						</div>
						<div class="col-md-4 question-item-rank">
							<div class="question-item-answered">
								<div>点赞:{{post.replyLikenum}}</div>
							</div>
							<div class="question-item-views">
								<div>回复:{{post.replyNum}}</div>
							</div>
							<div class="question-item-views">
								<div>浏览:{{post.replyBrowse}}</div>
							</div>
						</div>
					</li>
				</ul>


				<!-- 分页条-->
				<el-pagination background layout="prev, pager, next" @current-change="current_change" :total="total">
				</el-pagination>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		if (sessionStorage.getItem("access_token") != null) {
			axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
		}
		
		var course = new Vue({
			el: "#course",

			mounted: function() {
				this.token=sessionStorage.getItem("access_token");
				var userId= sessionStorage.getItem("userid");
				this.queryPost();
				this.queryType();
				/* this.isHaveToken(); */
			},
			data() {
				return {
					typeName: "",
					orderBy: "replyTime",
					courseId: sessionStorage.getItem("courId") ,
					total: 50, //默认数据总数
					pagesize: 10, //每页的数据条数
					currentPage: 1, //默认开始页面
					postList: [],
					typeList: [],
					dialogFormVisible: false,
					textarea: '',
					typename: '',
					form: {
						title: '',
						type: '',
						delivery: false,
						typeList: this.typeList
					},
					formLabelWidth: '120px',
					token:''
					
				}
			},
			methods: {
				queryPost() {
					let params = new URLSearchParams();
					params.append("typeName", this.typeName);
					params.append("page", this.currentPage);
					params.append("rows", this.pagesize);
					params.append("orderBy", this.orderBy);
					params.append("courseId", this.courseId);
					axios({
						method: 'post',
						url: '/api/bbs/coursepost/getAllCoursePost',
						data: params,
						headers: {
							//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
						}
					}).then(res => {
						res = res.data;
						this.postList = res.rows;
						this.total = res.total;
						console.log('posts==>' + this.postList);
					})

				},
				publicPost: function() {
					let params = new URLSearchParams();
					params.append("typeId", this.form.type);
					params.append("title", this.form.title);
					params.append("content", this.textarea);
					params.append("userId", userId);
					params.append("courseId", this.courseId);
					console.log("title==>" + this.form.title + " " + this.textarea + " " + this.form.type);
					axios({
						method: 'post',
						url: '/api/bbs/coursepost/insertPost',
						data: params,
						headers: {
							//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
						}
					}).then(res => {
						res = res.data;
						if (res.success) {
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.dialogFormVisible = false
							this.queryPost();
						} else {
							this.$message.error(res.message);
						}
					})
				},
				current_change: function(currentPage) {
					this.currentPage = currentPage;
					this.queryPost();
				},
				queryType() {
					axios({
						method: 'post',
						url: '/api/bbs/coursetype/getAllType',
						headers: {
							//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
						}
					}).then(res => {
						res = res.data;
						this.typeList = res;
						console.log('typeList==>' + this.typeList);
					})
				},
				queryPostByTypename: function(typename) {
					this.typeName = typename;
					this.queryPost();
				},
				queryAll: function() {
					this.typeName = "";
					this.queryPost();
				},
				btnNew: function() {
					this.orderBy = "replyTime";
					this.queryPost();
				},
				btnHot: function() {
					this.orderBy = "replyLikenum";
					this.queryPost();
				},
				btnReply: function(){
					this.orderBy = "replyNum";
					this.queryPost();
				},
				jumpPostDetails: function(post) {

					let params = new URLSearchParams();
					params.append("replyId", post.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/coursereply/updateBrowse',
						data: params,
						headers: {
							//"Authorization": "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiLlvKDkuIkiLCJzY29wZSI6WyJhbGwiLCJyZWFkIiwid3JpdGUiXSwiY29tcGFueSI6ImllcCIsImV4cCI6MTU0NDUzMTEzMCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVf5a2m55SfIn0seyJhdXRob3JpdHkiOiLmtYvor5XmnYPpmZAifV0sImp0aSI6IjQyNWQxN2NiLTA1MTEtNGUwNy1iZTBiLTMxNDY1MDYxYzhhYSIsImNsaWVudF9pZCI6ImllcCJ9.4ELHXcBVRxTDYAQP0CBYTTY9mxMqLgJhdFONiH6o_fs"
						}
					});
					console.log('courpost==>' + post.replyContent);
					sessionStorage.setItem("courPostId", post.postId);
					window.location.href = "courseDetails.html";

				},
				isHaveToken: function() {
					console.log(this.token)
					if (this.token != null) {
						
					} else {
						this.$confirm('您还没有登录账号, 是否登录?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							window.location.href = "\\login.html?callback-url=http://127.0.0.1/bbs/Reception/course.html";
							/* this.$message({
								type: 'success',
								message: '登录成功!'
							}); */
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消登录'
							});
							//window.location.href = ""
						});
						
					}
				}

			}
		})
	</script>
</html>
